{% include 'layout/layout_header.html' %}
<body>
    <div class="layui-layout layui-layout-admin">
        <div style="margin:10px;">
            <form class="layui-form layui-row layui-col-space16">
                <div class="layui-col-md4">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-username"></i>
                        </div>
                        <input type="text" name="A" value="" placeholder="Field A" class="layui-input" lay-affix="clear">
                    </div>
                </div>
                <div class="layui-col-md4">
                    <div class="layui-input-wrap">
                        <input type="text" name="B" placeholder="Field B" lay-affix="clear" class="layui-input">
                    </div>
                </div>
                <div class="layui-col-md4">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-date"></i>
                        </div>
                        <input type="text" name="C" readonly placeholder="Field C" class="layui-input demo-table-search-date">
                    </div>
                </div>
                <div class="layui-btn-container layui-col-xs12">
                    <button class="layui-btn" lay-submit lay-filter="demo-table-search">Search</button>
                    <button type="reset" class="layui-btn layui-btn-primary">Clear</button>
                </div>
            </form>
            <table class="layui-hide" id="page-search" lay-filter="page-toolbar-filter"></table>
        </div>
    </div>
</body>

{% include 'layout/layout_footer.html' %}


<!-- 工具栏模板 -->

<script type="text/html" id="page-toolbar">
    <div class="layui-btn-group">
        <button type="button" class="layui-btn layui-btn-sm" lay-event="add">
            <i class="layui-icon layui-icon-add-1"></i>
        </button>
    </div>

</script>
<script type="text/html" id="operation-toolbar" lay-filter="page-toolbar-filter">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
        <button class="layui-btn layui-btn-sm" lay-event="reply">回复</button>
    </div>
</script>

<style type="text/css">
.feedback-rating-box {
    line-height: 10px;
}
.feedback-rating-box .rating {
    margin-top: 11px;
    float: right;
}
</style>
<script type="text/javascript">

//JS
layui.use(function(){
    var element = layui.element;
    var layer = layui.layer;
    var util = layui.util;
    var $ = layui.$;
    var table = layui.table;
    var laydate = layui.laydate;
    var form = layui.form;

    // 创建表格实例
    var inst = table.render({
        elem: '#page-search',
        toolbar: '#page-toolbar',
        url: '/adm/feedback/index?ajax=1', // 此处为静态模拟数据，实际使用时需换成真实接口
        cols: [[
            {field:'feedback_id', title: 'ID', width:80, sort: true, fixed: true},
            {field:'user_id', title: '反馈用户ID', width: 120},
            {field:'app_vsn', title: 'APP版本', width: 100},
            {field:'type', title: '反馈类型', width: 100, templet: function(d) {
                if(d.type == 'featureRequest') {
                    return '<span>功能要求</span>';
                } else if (d.type == 'bugReport' ) {
                    return '<span>错误报告</span>';
                } else {
                    return '<span>其他</span>';
                }
            }},
            {field:'rating', title: '反馈评级', width: 180, templet: function(d) {
                return '<div class="feedback-rating-box"><div class="feedback-rating" lay-options="{value: '+d.rating+'}"></div> <div class="rating">' + d.rating + '</div></div>'
            }},
            {field:'contact_detail', title: '联系方式', width: 300},
            {field:'body', title: '反馈内容', width: 300},
            {field:'attach', title: '反馈附件', width: 120, templet: function(d) {
                    return '<a href="javascript:;" class="feedback-attach" data-attach="'+ d.attach +'", data-body="' + d.body + '">查看附件</a>';
            }},
            {field:'reply_count', title: '回复数量', width: 100},
            {field:'device_id', title: '设备ID', width: 154},
            {field:'client_operating_system', title: '设备类型', width: 100},
            {field:'client_operating_system_vsn', title: '设备版本', width: 200},
            {field:'status', title: '状态', width: 85, templet: function(d) {
                if(d.status == 1) {
                    return '<span style="color: blue">待回复</span>';
                } else if (d.status == 2 ) {
                    return '<span style="color: pink">已回复</span>';
                } else if (d.status == 3 ) {
                    return '<span style="color: gray">已完结</span>';
                } else if (d.status == 0 ) {
                    return '<span style="color: gray">已禁用</span>';
                } else if (d.status == -1 ) {
                    return '<span style="color: red">已删除</span>';
                } else {
                    return '<span style="color: pink">unkonw</span>';
                }
            }},

            {field:'updated_at', title: '编辑时间', width: 180, templet: function(d) {
                if (d.updated_at > 0) {
                    return layui.util.toDateString(d.updated_at, 'yyyy-MM-dd HH:mm:SSS');
                } else {
                    return '';
                }
            }},
            {field:'created_at', title: '添加时间', width: 180, templet: function(d) {
                if (d.created_at > 0) {
                    return layui.util.toDateString(d.created_at, 'yyyy-MM-dd HH:mm:SSS');
                } else {
                    return '';
                }
            }},
            {fixed: 'right', title:'操作', minWidth: 128, toolbar: '#operation-toolbar'}
        ]],
        height: 500,
        page: true,
        limit: 10,
        limits:[10, 20, 80, 160, 300],
        request: {
            pageName: 'page',
            limitName: 'size'
        },
        parseData: function(res){ // res 即为原始返回的数据
            return {
                "code": res.code, // 解析接口状态
                "msg": res.msg, // 解析提示文本
                "count": res.payload.total, // 解析数据长度
                "data": res.payload.list // 解析数据列表
            };
        },
        complete: function(xhr, ts) {

            // 渲染五星评级
            layui.rate.render({
                elem: '.feedback-rating'
                , readonly: true
                , half: true // 开启半星
            });
        }
    });

    // inst.resize(); // 对当前表格重新适配尺寸
    // 头部工具栏事件
    table.on('toolbar(page-toolbar-filter)', function(obj){
        var options = obj.config; // 获取当前表格属性配置项
        var checkStatus = table.checkStatus(options.id); // 获取选中行相关数据
        console.log(obj); // 查看对象所有成员

        // 根据不同的事件名进行相应的操作
        switch(obj.event){ // 对应模板元素中的 lay-event 属性值
          case 'add':
            layer.msg('添加');
          break;
          case 'delete':
            layer.msg('删除');
          break;
          case 'reply':
            layer.msg('编辑');
          break;
        };
    });
    // 单元格工具事件「单击触发]
    table.on('tool(page-toolbar-filter)', function(obj){
        var options = obj.config; // 获取当前表格属性配置项
        var checkStatus = table.checkStatus(options.id); // 获取选中行相关数据
        // console.log(obj.data); // 查看对象所有成员

        // 根据不同的事件名进行相应的操作
        switch(obj.event){ // 对应模板元素中的 lay-event 属性值
          case 'delete':
            layer.msg('删除');
          break;
          case 'reply':
            to_reply(obj.data.feedback_id)
          break;
        };
    });

    function to_reply(feedback_id) {
        // var feedback_id = $(this).attr('feedback_id');
        layer.open({
            type: 1,
            area: ['500px', '256px'],
            resize: false,
            shadeClose: true,
            title: '用户反馈回复',
            content: `
                <div class="layui-form" lay-filter="filter-test-layer" style="margin: 16px;">
                    <div class="on-reply-btn-container">
                        <div class="layui-form-item">
                            <div class="layui-input-wrap">
                                <div class="layui-input-prefix">
                                    回复
                                </div>
                                <textarea name="body" placeholder="" class="layui-textarea" lay-verify="required"></textarea>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="on-reply-btn">提交</button>
                        </div>
                    </div>
                </div>
            `,
            success: function(){
                // 对弹层中的表单进行初始化渲染
                form.render();
                // 表单提交事件
                form.on('submit(on-reply-btn)', function(data) {
                    var post_data = data.field; // 获取表单字段值
                    post_data['feedback_id'] = feedback_id;
                    post_data['feedback_reply_pid'] = 0;
                    // 显示填写结果，仅作演示用
                    // layer.alert(JSON.stringify(post_data), {
                    //   title: '当前填写的字段值'
                    // });
                    $.ajax({
                            type: "POST",
                            url: "/adm/feedback/reply",
                            data: post_data,
                            headers: {},
                            success: function(res) {
                                    // console.log("res: ", res)
                                    if (res && res.code==0) {
                                            layer.msg('操作成功')
                                            setTimeout(function(){
                                                    location.reload()
                                            }, 1000)
                                    } else if(res && res.msg) {
                                            layer.msg(res.msg)
                                            $(":input[name='account']").focus()
                                    } else {
                                            layer.msg('未知错误')
                                            // setTimeout(function(){
                                            //     location.reload()
                                            // }, 3000)
                                    }
                            },
                            error: function(xhr) {
                                    console.log('xhr: ', xhr.responseJSON)
                                    if (xhr.responseJSON && xhr.responseJSON.msg) {
                                            layer.msg(xhr.responseJSON.msg)
                                    } else {
                                            layer.msg('未知错误')
                                    }
                            }
                    });
                    return false; // 阻止默认 form 跳转
                });
            }
        });
    }

    //  jquery使用on可绑定动态元素事件
    $('body').on('click','.feedback-attach', function () {
            var body = $(this).attr('data-body');
            var attach = $(this).attr('data-attach');
            var json = {
            "title": "", //相册标题
            "id": 0, //相册id
            "start": 0, //初始显示的图片序号，默认0
            "data": [] //相册包含的图片，数组格式
            };
            var attach2 = [];
            $.ajax({
                    type: "POST",
                    url: "/adm/attach/auth",
                    data: {
                        'uri': attach
                    },
                    async: false, // 同步请求
                    headers: {},
                    success: function(res) {
                            console.log("res: ", res)
                            if (res && res.code==0) {
                                attach2 = res.payload.uri;
                            } else if(res && res.msg) {
                                    layer.msg(res.msg)
                            } else {
                                    layer.msg('未知错误')
                            }
                    },
                    error: function(xhr) {
                            // console.log('xhr: ', xhr.responseJSON)
                            if (xhr.responseJSON && xhr.responseJSON.msg) {
                                    layer.msg(xhr.responseJSON.msg)
                            } else {
                                    layer.msg('未知错误')
                            }
                    }
            })
            for (var i = 0; i < attach2.length; i++) {
                json['data'].push({
                        'alt': body,
                        'pid':0,
                        'src': attach2[i],
                        'thumb': attach2[i],
                });
            }
            layer.photos({
                photos: json
                , anim: 5 //0-6的选择，指定弹出图片动画类型
            })
     });

    // 日期
    laydate.render({
        elem: '.demo-table-search-date'
    });
    // 搜索提交
    form.on('submit(demo-table-search)', function(data){
        var field = data.field; // 获得表单字段
        // 执行搜索重载
        table.reload('page-search', {
            page: {
                curr: 1 // 重新从第 1 页开始
            },
            where: field // 搜索的字段
        });
        layer.msg('搜索成功<br>此处为静态模拟数据，实际使用时换成真实接口即可');
        return false; // 阻止默认 form 跳转
    });
});
</script>
